<script setup>
import {onMounted, ref} from "vue";
import {useRouter} from 'vue-router';
import request from "../plugins/request.js";
import {showFailToast, showSuccessToast} from "vant";
import {getCurrentUser} from "../service/user";

// 获取当前用户 是否登录
const currentUser = ref({})
onMounted(async ()=>{
  currentUser.value = await getCurrentUser()
})

const initFormData = {
  'description': '',
  'expireTime': '',
  'maxNum': 3,
  'name': '',
  'password': '',
  'status': '0'
}
const router = useRouter()
const teamData = ref({...initFormData})

const showPicker = ref(false);
const minData= ref(new Date())
const onConfirm = ({ selectedValues }) => {
  teamData.value.expireTime = selectedValues.join('-');
  showPicker.value = false;
};

const onSubmit = async ()=>{
  const result = await request.post('/team/add',{...teamData.value})
  const {code} = result;
  if (code === 200)  {
    // 跳转到team页面 展示队伍
    showSuccessToast('创建成功')
    await router.replace("/team")
  }else {
    showFailToast('创建失败')
  }
}
</script>

<template>
  <div id="team_create">
    <div v-if="currentUser" style="margin: 15px 10px;">
      <van-form @submit="onSubmit" >
        <van-cell-group inset>
          <van-field
              v-model="teamData.name"
              name="name"
              label="队伍名称"
              placeholder="输入队伍名称"
              :rules="[{ required: true, message: '请输入队伍名称' }]"
          />
          <van-field
              v-model="teamData.description"
              name="description"
              label="队伍描述"
              placeholder="输入队伍描述"
              :rules="[{ required: true, message: '请输入队伍描述' }]"
          />
          <van-field name="maxNum" label="最大人数">
            <template #input>
              <van-stepper v-model="teamData.maxNum" max="10" min="2"/>
            </template>
          </van-field>

          <van-field
              v-model="teamData.expireTime"
              is-link
              readonly
              name="expireTime"
              label="选择过期时间"
              placeholder="选择过期时间"
              @click="showPicker = true"
          />
          <van-popup v-model:show="showPicker" position="bottom">
            <van-date-picker @confirm="onConfirm" @cancel="showPicker = false" :min-date="minData"/>
          </van-popup>

          <van-field name="status" label="队伍状态">
            <template #input>
              <van-radio-group v-model="teamData.status" direction="horizontal" >
                <van-radio name=0 icon-size="18px">公开</van-radio>
                <van-radio name=1 icon-size="18px">私有</van-radio>
                <van-radio name=2 icon-size="18px">加密</van-radio>
              </van-radio-group>
            </template>
          </van-field>

          <van-field
              v-if="teamData.status === '2'"
              v-model="teamData.password"
              type="password"
              name="password"
              label="队伍密码"
              placeholder="输入队伍密码"
              :rules="[{ required: true, message: '请输入队伍密码' }]"
          />


        </van-cell-group>

        <div style="margin: 16px;">
          <van-button round block type="primary" native-type="submit">
            创建队伍
          </van-button>
        </div>
      </van-form>
    </div>
    <van-empty v-else description="暂无信息"/>
  </div>
</template>


<style scoped>

</style>
